<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>

<script type="text/javascript">
var deleteOrderItem = false;
var deleteOrderItemid = 0;
function formatMoney(num){   //
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num))
		num = "0";
	sign = (num == (num = Math.abs(num)));   //获取绝对值
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;  
    num = Math.floor(num/100).toString();  
    if(cents<10)  
    cents = "0" + cents;  
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)  
    	num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3));  
    return (((sign)?'':'-') + num + '.' + cents);  
}
$(function(){
	$("img.cartProductItemIfSelected").click(function(){
		var selectit = $(this).attr("selectit");
		if(selectit == "selectit"){
			$(this).attr("src","./img/site/cartNotSelected.png");
			$(this).attr("selectit",false);
			$(this).parents("tr.cartProductItemTR").css("background-color","#fff");
		}else{
			$(this).attr("src","./img/site/cartSelected.png");
			$(this).attr("selectit","selectit");
			$(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
		}
		synSelect(); //判断是否全选
		syncCreateOrderButton()  //判断是否勾选商品
		calcCartSumPriceAndNumber();  //计算总价
	});
	$("img.selectAllItem").click(function(){
		var selectit = $(this).attr("selectit");
		if("selectit" == selectit){
			$("img.selectAllItem").attr("src","./img/site/cartNotSelected.png");
			$("img.selectAllItem").attr("selectit","false");
			$(".cartProductItemIfSelected").each(function(){
				 $(this).attr("src","./img/site/cartNotSelected.png");
	             $(this).attr("selectit","false");
	             $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
			});
		}else{
			$("img.selectAllItem").attr("src","./img/site/cartSelected.png");
			$("img.selectAllItem").attr("selectit","selectit");
			$(".cartProductItemIfSelected").each(function(){
				 $(this).attr("src","./img/site/cartSelected.png");
	             $(this).attr("selectit","selectit");
	             $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
			});
		}
		syncCreateOrderButton();
		calcCartSumPriceAndNumber();
	});
	
	$(".orderItemNumberSetting").keyup(function(){
		var pid = $(this).attr("pid");
		var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.orderItemPromotePrice[pid="+pid+"]").text();
		var num = $(".orderItemNumberSetting[pid="+pid+"]").val();
		num = parseInt(num);
		if(isNaN(num))
            num= 1;
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
        syncPrice(pid,num,price);
	});
	$(".numberPlus").click(function(){
        var pid=$(this).attr("pid");
        var stock= $("span.orderItemStock[pid="+pid+"]").text();
        var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
        var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
        num++;
        if(num>stock)
            num = stock;
        syncPrice(pid,num,price);
        
        
    });
    $(".numberMinus").click(function(){
        var pid=$(this).attr("pid");
        var stock= $("span.orderItemStock[pid="+pid+"]").text();
        var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
        var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
        --num;
        if(num<=0)
            num=1;
        syncPrice(pid,num,price);
        
    }); 
    
    $("a.deleteOrderItem").click(function(){
    	deleteOrderItem = false;
    	var oiid = $(this).attr("oiid");
    	deleteOrderItemid = oiid;
    	$("#deleteConfirmModal").modal('show');
    });
    
    $("button.deleteConfirmButton").click(function(){
    	deleteOrderItem = true;
    	$("#deleteConfirmModal").modal('hide');
    });
	
    $("#deleteConfirmModal").on("hidden.bs.modal",function(e){
    	if(deleteOrderItem){
    		var page = "foredeleteOrderItem";	
    		$.post(
    				page,
    				{"orderItem.id":deleteOrderItemid},
    				function(result){
    					
    					if(result == "success"){
    						//$("tr.cartProductItemTR[oiid="+deleteOrderItemid+"]").hide();
    						location.reload();
    					}else{
    						location.href="login.jsp";
    					}
    				}
    			);
    	}
    });
    
});

function syncPrice(pid,num,price){
	$(".orderItemNumberSetting[pid="+pid+"]").val(num);
    var cartProductItemSmallSumPrice = formatMoney(num*price); 
    $(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+cartProductItemSmallSumPrice);
    calcCartSumPriceAndNumber();
    
    
    //ajax改变商品数量
    var page = "forechangeOrderItem";
    $.post(
    		page,
    		{"product.id":pid,"num":num},
    		function(result){
    			if("success" != result){
    				location.href="login.jsp";
    			} 
    		}
    	);
}

function synSelect(){//判断是否全选商品
	var selectAll = true;
	$(".cartProductItemIfSelected").each(function(){
		if("false" == $(this).attr("selectit"))
			selectAll = false;
	});
	if(selectAll) 
		$("img.selectAllItem").attr("src","./img/site/cartSelected.png");
	else
		$("img.selectAllItem").attr("src","./img/site/cartNotSelected.png");
}

function syncCreateOrderButton(){ //判断是否勾选商品
	var selectAny = false;
	$(".cartProductItemIfSelected").each(function(){
		if("selectit" == $(this).attr("selectit"))
			selectAny = true;
	});
	if(selectAny){
		$("button.createOrderButton").css("background-color","#C40000");
		$("button.createOrderButton").removeAttr("disabled");
	}else{
		$("button.createOrderButton").css("background-color","#AAAAAA");
		$("button.createOrderButton").attr("disabled","disabled"); 
	}
}

function calcCartSumPriceAndNumber(){//计算总价 
	var sum = 0;
	var totalNumber = 0;
	$("img.cartProductItemIfSelected[selectit='selectit']").each(function(){
		var oiid = $(this).attr("oiid");
		//alert($(this).parent("td").nextAll("td").children(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text());
		var price = $(this).parent("td").nextAll("td").children(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text();
		price = price.replace(/,/g,"");
		price = price.replace(/￥/g,"");
		
		sum += new Number(price);
		var num = $(".orderItemNumberSetting[oiid="+oiid+"]").val();
		totalNumber += new Number(num);
	});
	
	$("span.cartSumPrice").html("￥"+formatMoney(sum));
	$("span.cartTitlePrice").html("￥"+formatMoney(sum));
	$("span.cartSumNumber").html(totalNumber);
}




</script>
<div class="cartDiv">
	<div class="cartTitle pull-right">
		<span>已选商品  (不含运费)</span>
		<span class="cartTitlePrice">￥0.00</span>
		<button class="createOrderButton" disabled="disabled">结 算</button>
	</div>
	
	<!-- 订单项内容 -->
	<div class="cartProductList">
		<table class="cartProductTable">
			<thead>
				<tr>
					<th class="selectAndImage"><img src="./img/site/cartNotSelected.png" class="selectAllItem" selectit="false"/>全选</th>
					<th>商品信息</th>
					<th>单价</th>
					<th>数量</th>
					<th width="120px">金额</th>
					<th class="operation">操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${orderItems}" var="oi">
					<tr class="cartProductItemTR" oiid="${oi.id}">
						<td>
							<img src="./img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="${oi.id}" selectit="false"/>
							<a href="#" style="display:none"><img src="./img/site/cartSelected.png" /></a>
							<img  src="./img/productSingle_middle/${oi.product.firstProductImage.id}.jpg" class="cartProductImg" />
						</td>
						<td>
							<div class="cartProductLinkOutDiv">
								<a class="cartProductLink" href="foreproduct?product.id=${oi.product.id}" >${oi.product.name}</a>
								<div class="cartProductLinkInnerDiv">
									<img title="支持信用卡支付" src="./img/site/creditcard.png"/>
									<img title="消费者保障服务,承诺7天退货" src="./img/site/7day.png" />
									<img title="消费者保障服务,承诺如实描述" src="./img/site/promise.png" />
								</div>
							</div>
						</td>
						<td>
							<span class="cartProductItemOringalPrice" >￥${oi.product.originalPrice}</span>
							<span class="cartProductItemPromotionPrice">￥${oi.product.promotePrice}</span>
						</td>
						<td>
							<div class="cartProductChangeNumberDiv">
								<span pid="${oi.product.id}" class="hidden orderItemStock ">${oi.product.stock}</span>
	                                <span pid="${oi.product.id}" class="hidden orderItemPromotePrice ">${oi.product.promotePrice}</span>
	                                <a href="#nowhere" class="numberMinus" pid="${oi.product.id}">-</a>
	                                <input value="${oi.number}" autocomplete="off" class="orderItemNumberSetting" oiid="${oi.id}" pid="${oi.product.id}">
	                                <a href="#nowhere" class="numberPlus" pid="${oi.product.id}" stock="${oi.product.stock}">+</a>
							</div>
						</td>
						<td>
	                            <span pid="${oi.product.id}" oiid="${oi.id}" class="cartProductItemSmallSumPrice">￥<fmt:formatNumber type="number" value="${oi.product.promotePrice*oi.number}" minFractionDigits="2" /></span>
	                    </td>
	                    <td>
	                            <a href="#nowhere" oiid="${oi.id}" class="deleteOrderItem">删除</a>
	                    </td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	
	
	<div class="cartFoot">
		<img src="./img/site/cartNotSelected.png" class="selectAllItem" selectit="false"/>
		<span>全选</span>
		<div class="pull-right">
			<span>已选商品 <span class="cartSumNumber">0</span> 件</span>
			<span>合计  (不含运费): </span>
			<span class="cartSumPrice">￥0.00</span>
			<button class="createOrderButton" disabled="disabled">结 算</button>
		</div>
	</div>
</div>
</html>